<template>
  <div class="mobile-container">
    <div class="app-content">
      <!-- 顶部栏 -->
      <div class="header">
        <div class="header-top">
          <div class="back-icon" @click="handleBack">
            <Icon icon="mdi:arrow-left"/>
          </div>
          <div class="page-title">我的卡包</div>
          <div class="placeholder"></div>
        </div>
      </div>

      <!-- 卡包列表 -->
      <div class="card-list">
        <!-- 添加卡片 -->
        <div class="add-card" @click="showAddDialog = true">
          <div class="add-card-content">
            <div class="add-icon">
              <Icon icon="mdi:plus" />
            </div>
            <div class="add-text">添加</div>
          </div>
        </div>

        <!-- 银行卡列表 -->
        <div class="card-item" v-for="card in cardList" :key="card.id"
             :class="{'default-card': card.isDefault}">
          <div class="card-header">
            <div class="card-type">
              <Icon :icon="getCardTypeIcon(card.type)" class="card-type-icon" />
              <span>{{ getCardTypeText(card.type) }}</span>
            </div>
            <div class="card-actions">
              <button class="action-btn" @click.stop="setAsDefault(card.id)"
                      v-if="!card.isDefault">设为默认</button>
              <button class="default-tag" v-else>默认</button>
              <button class="action-btn delete" @click.stop="deleteCard(card.id)">删除</button>
            </div>
          </div>

          <div class="card-content">
            <div class="card-info">
              <div class="card-name">{{ card.accountName }}</div>
              <div class="card-number">{{ formatCardNumber(card) }}</div>
            </div>
            <div class="qrcode-preview" v-if="card.type !== 'bank'" @click.stop="showQRCodeDetail(card)">
              <Icon icon="mdi:qrcode" class="qrcode-icon" />
            </div>
          </div>
        </div>
      </div>

      <!-- 添加卡包弹窗 -->
      <div v-if="showAddDialog" class="bottom-sheet-mask" @click="showAddDialog = false">
        <div class="bottom-sheet" @click.stop>
          <div class="sheet-header">
            <div class="sheet-handle"></div>
          </div>
          <div class="sheet-content">
            <div class="payment-options">
              <div class="payment-option" @click="selectPaymentType('wechat')">
                <div class="payment-icon wechat">
                  <Icon icon="mdi:wechat" />
                </div>
                <span class="payment-text">微信</span>
              </div>
              <div class="payment-option" @click="selectPaymentType('alipay')">
                <div class="payment-icon alipay">
                  <Icon icon="ri:alipay-fill" />
                </div>
                <span class="payment-text">支付宝</span>
              </div>
              <div class="payment-option" @click="selectPaymentType('bank')">
                <div class="payment-icon bank">
                  <Icon icon="mdi:credit-card" />
                </div>
                <span class="payment-text">银行卡</span>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- 添加支付方式表单弹窗 -->
      <div v-if="showFormDialog" class="custom-dialog-mask">
        <div class="custom-dialog payment-form-dialog">
          <div class="dialog-header">
            <h3>{{ getFormTitle() }}</h3>
            <span class="close-btn" @click="closeFormDialog">×</span>
          </div>
          <div class="dialog-body">
            <form class="payment-form">
              <!-- 户名 -->
              <div class="form-group">
                <label class="form-label">户名</label>
                <input
                  v-model="formData.accountName"
                  type="text"
                  class="form-input"
                  :placeholder="getPlaceholder('accountName')"
                  maxlength="50"
                >
              </div>

              <!-- 账号 -->
              <div class="form-group">
                <label class="form-label">{{ getAccountLabel() }}</label>
                <input
                  v-model="formData.accountNumber"
                  type="text"
                  class="form-input"
                  :placeholder="getPlaceholder('accountNumber')"
                  maxlength="50"
                >
              </div>

              <!-- 银行卡特有字段 -->
              <div class="form-group" v-if="formData.type === 'bank'">
                <label class="form-label">开户银行</label>
                <input
                  v-model="formData.bankName"
                  type="text"
                  class="form-input"
                  placeholder="请输入开户银行"
                  maxlength="50"
                >
              </div>

              <!-- 二维码上传 -->
              <div class="form-group" v-if="formData.type !== 'bank'">
                <label class="form-label">二维码</label>
                <div class="qrcode-upload" @click="uploadQRCode">
                  <div class="qrcode-placeholder">
                    <Icon icon="mdi:qrcode" class="qrcode-upload-icon" />
                    <span class="qrcode-upload-text">点击上传二维码</span>
                  </div>
                  <input
                    ref="qrcodeInput"
                    type="file"
                    accept="image/*"
                    style="display: none"
                    @change="handleQRCodeUpload"
                  >
                </div>
              </div>

              <!-- 设为默认 -->
              <div class="form-group checkbox-group">
                <label class="checkbox-label">
                  <input
                    v-model="formData.isDefault"
                    type="checkbox"
                    class="checkbox-input"
                  >
                  <span class="checkbox-custom"></span>
                  设为默认
                </label>
                <div class="checkbox-tip">提醒：默认使用该方式</div>
              </div>

              <!-- 验证码 -->
              <div class="form-group">
                <label class="form-label">验证码</label>
                <div class="verification-code-group">
                  <input
                    v-model="formData.verificationCode"
                    type="text"
                    class="form-input code-input"
                    placeholder="请输入验证码"
                    maxlength="6"
                  >
                  <button
                    type="button"
                    class="code-btn"
                    :class="{ 'disabled': isCounting }"
                    :disabled="isCounting"
                    @click="getVerificationCode"
                  >
                    {{ countdownText }}
                  </button>
                </div>
              </div>

              <button
                type="button"
                class="submit-btn"
                :class="{ 'disabled': !isFormValid }"
                :disabled="!isFormValid"
                @click="submitForm"
              >
                提交
              </button>
            </form>
          </div>
        </div>
      </div>

      <!-- 二维码详情弹窗 -->
      <div v-if="showQRCodeDetailDialog" class="custom-dialog-mask" @click="showQRCodeDetailDialog = false">
        <div class="custom-dialog qrcode-detail-dialog" @click.stop>
          <div class="dialog-header">
            <h3>{{ currentCard.type === 'wechat' ? '微信收款码' : '支付宝收款码' }}</h3>
            <span class="close-btn" @click="showQRCodeDetailDialog = false">×</span>
          </div>
          <div class="dialog-body">
            <div class="qrcode-display-section">
              <div class="qrcode-container">
                <img :src="getQRCodeImage(currentCard)" alt="收款二维码" class="qrcode-image" />
              </div>
              <div class="qrcode-tips">
                <Icon icon="mdi:information-outline" class="tip-icon" />
                <span>请让对方扫描此二维码进行付款</span>
              </div>
            </div>

            <div class="card-info-section">
              <div class="info-item">
                <span class="info-label">支付方式</span>
                <div class="info-value">
                  <Icon :icon="getCardTypeIcon(currentCard.type)" class="info-icon" />
                  <span>{{ getCardTypeText(currentCard.type) }}</span>
                </div>
              </div>
              <div class="info-item">
                <span class="info-label">户名</span>
                <span class="info-value">{{ currentCard.accountName }}</span>
              </div>
              <div class="info-item">
                <span class="info-label">{{ currentCard.type === 'wechat' ? '微信账号' : '支付宝账号' }}</span>
                <span class="info-value">{{ currentCard.accountNumber }}</span>
              </div>
              <div class="info-item" v-if="currentCard.isDefault">
                <span class="info-label">状态</span>
                <span class="default-badge">默认支付方式</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { Icon } from '@iconify/vue2'

export default {
  name: 'CardPackPage',
  components: {
    Icon
  },
  data() {
    return {
      showAddDialog: false,
      showFormDialog: false,
      showQRCodeDetailDialog: false,
      isCounting: false,
      countdown: 60,
      countdownText: '获取验证码',
      currentCard: {},
      formData: {
        type: '', // wechat, alipay, bank
        accountName: '',
        accountNumber: '',
        bankName: '',
        qrcode: '',
        isDefault: false,
        verificationCode: ''
      },
      cardList: [
        {
          id: 1,
          type: 'wechat',
          accountName: '张三',
          accountNumber: 'wx_zhangsan123',
          qrcode: require('../../../assets/images/wp_qr_code.png'),
          isDefault: true
        },
        {
          id: 2,
          type: 'alipay',
          accountName: '张三',
          accountNumber: 'zhangsan@alipay.com',
          qrcode: require('../../../assets/images/wp_qr_code.png'),
          isDefault: false
        },
        {
          id: 3,
          type: 'bank',
          accountName: '张三',
          accountNumber: '6217 1234 1234 1234',
          bankName: '中国工商银行',
          isDefault: false
        }
      ]
    }
  },
  computed: {
    isFormValid() {
      const basicValid = this.formData.accountName &&
        this.formData.accountNumber &&
        this.formData.verificationCode

      if (this.formData.type === 'bank') {
        return basicValid && this.formData.bankName
      }

      return basicValid
    }
  },
  methods: {
    handleBack() {
      this.$router.go(-1)
    },

    selectPaymentType(type) {
      this.formData = {
        type: type,
        accountName: '',
        accountNumber: '',
        bankName: '',
        qrcode: '',
        isDefault: false,
        verificationCode: ''
      }
      this.showAddDialog = false
      this.showFormDialog = true
    },

    closeFormDialog() {
      this.showFormDialog = false
      this.formData = {
        type: '',
        accountName: '',
        accountNumber: '',
        bankName: '',
        qrcode: '',
        isDefault: false,
        verificationCode: ''
      }
    },

    getCardTypeIcon(type) {
      const icons = {
        wechat: 'mdi:wechat',
        alipay: 'ri:alipay-fill',
        bank: 'mdi:credit-card'
      }
      return icons[type]
    },

    getCardTypeText(type) {
      const texts = {
        wechat: '微信',
        alipay: '支付宝',
        bank: '银行卡'
      }
      return texts[type]
    },

    getFormTitle() {
      const titles = {
        wechat: '微信',
        alipay: '支付宝',
        bank: '银行卡'
      }
      return titles[this.formData.type]
    },

    getAccountLabel() {
      const labels = {
        wechat: '微信账号',
        alipay: '支付宝账号',
        bank: '卡号'
      }
      return labels[this.formData.type] || '账号'
    },

    getPlaceholder(field) {
      if (field === 'accountName') return '请输入户名'

      const placeholders = {
        wechat: '请填写微信账号',
        alipay: '请填写支付宝账号',
        bank: '请填写银行卡号'
      }
      return placeholders[this.formData.type] || '请填写账号'
    },

    formatCardNumber(card) {
      if (card.type === 'bank') {
        return card.accountNumber
      }
      return card.accountNumber
    },

    uploadQRCode() {
      this.$refs.qrcodeInput.click()
    },

    handleQRCodeUpload(event) {
      const file = event.target.files[0]
      if (file) {
        const reader = new FileReader()
        reader.onload = (e) => {
          this.formData.qrcode = e.target.result
        }
        reader.readAsDataURL(file)
      }
    },

    async getVerificationCode() {
      if (this.isCounting) return

      this.isCounting = true
      this.countdown = 60

      const timer = setInterval(() => {
        this.countdown--
        this.countdownText = `${this.countdown}s后重新获取`

        if (this.countdown <= 0) {
          clearInterval(timer)
          this.isCounting = false
          this.countdownText = '获取验证码'
        }
      }, 1000)

      // TODO: 调用获取验证码接口
      console.log('发送验证码到手机')
    },

    submitForm() {
      if (!this.isFormValid) return

      const newCard = {
        id: Date.now(),
        type: this.formData.type,
        accountName: this.formData.accountName,
        accountNumber: this.formData.accountNumber,
        qrcode: this.formData.qrcode || this.getDefaultQRCode(this.formData.type),
        isDefault: this.formData.isDefault
      }

      if (this.formData.type === 'bank') {
        newCard.bankName = this.formData.bankName
      }

      // 如果设为默认，取消其他卡的默认状态
      if (this.formData.isDefault) {
        this.cardList.forEach(card => {
          card.isDefault = false
        })
      }

      this.cardList.push(newCard)
      this.closeFormDialog()

      // TODO: 调用提交接口
      console.log('提交表单数据:', this.formData)
    },

    setAsDefault(cardId) {
      this.cardList.forEach(card => {
        card.isDefault = card.id === cardId
      })
      // TODO: 调用设置默认接口
    },

    deleteCard(cardId) {
      if (confirm('确定要删除这张卡吗？')) {
        this.cardList = this.cardList.filter(card => card.id !== cardId)
        // TODO: 调用删除接口
      }
    },

    showQRCodeDetail(card) {
      this.currentCard = card
      this.showQRCodeDetailDialog = true
    },

    getQRCodeImage(card) {
      if (card.qrcode) {
        return card.qrcode
      }
      return this.getDefaultQRCode(card.type)
    },

    getDefaultQRCode(type) {
      const defaultCodes = {
        wechat: 'https://via.placeholder.com/200x200/07C160/FFFFFF?text=WeChat+QR',
        alipay: 'https://via.placeholder.com/200x200/1677FF/FFFFFF?text=Alipay+QR'
      }
      return defaultCodes[type] || ''
    }
  }
}
</script>

<style scoped>
<style scoped>
.mobile-container {
  width: 100%;
  min-height: 100vh;
  background: #f5f5f5;
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  padding: 20px;
}

.app-content {
  width: 375px;
  min-height: 667px;
  background: white;
  border-radius: 20px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
  overflow: hidden;
  position: relative;
  display: flex;
  flex-direction: column;
}

/* 顶部栏样式 */
.header {
  padding: 15px 20px;
  background: white;
  border-bottom: 1px solid #f0f0f0;
}

.header-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.back-icon {
  padding: 8px;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  color: #333;
}

.back-icon:hover {
  background: #f5f5f5;
}

.page-title {
  font-size: 18px;
  font-weight: 600;
  color: #333;
}

.placeholder {
  width: 36px;
}

/* 卡包列表样式 */
.card-list {
  flex: 1;
  padding: 20px;
  overflow-y: auto;
}

.add-card {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border-radius: 12px;
  padding: 20px;
  margin-bottom: 16px;
  cursor: pointer;
  transition: all 0.3s ease;
  color: white;
}

.add-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
}

.add-card-content {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
}

.add-icon {
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 50%;
}

.add-text {
  font-size: 16px;
  font-weight: 600;
}

/* 卡片项样式 */
.card-item {
  background: white;
  border-radius: 12px;
  padding: 16px;
  margin-bottom: 12px;
  border: 2px solid #f0f0f0;
  transition: all 0.3s ease;
}

.card-item.default-card {
  border-color: #667eea;
  background: linear-gradient(135deg, #f8f9ff 0%, #f0f2ff 100%);
}

.card-item:hover {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}

.card-type {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  color: #333;
}

.card-type-icon {
  font-size: 18px;
  color: #667eea;
}

.card-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.action-btn {
  padding: 4px 8px;
  border: 1px solid #e0e0e0;
  border-radius: 4px;
  background: white;
  font-size: 12px;
  color: #666;
  cursor: pointer;
  transition: all 0.3s ease;
}

.action-btn:hover {
  background: #f5f5f5;
}

.action-btn.delete {
  color: #ff4d4f;
  border-color: #ff4d4f;
}

.action-btn.delete:hover {
  background: #fff2f0;
}

.default-tag {
  padding: 4px 8px;
  background: #667eea;
  color: white;
  border-radius: 4px;
  font-size: 12px;
  border: none;
}

.card-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.card-info {
  flex: 1;
}

.card-name {
  font-size: 16px;
  font-weight: 600;
  color: #333;
  margin-bottom: 4px;
}

.card-number {
  font-size: 14px;
  color: #666;
}

.qrcode-preview {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f5f5f5;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.qrcode-preview:hover {
  background: #667eea;
}

.qrcode-preview:hover .qrcode-icon {
  color: white;
}

.qrcode-icon {
  font-size: 24px;
  color: #999;
  transition: all 0.3s ease;
}

/* 底部弹窗样式 */
.bottom-sheet-mask {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  z-index: 1000;
  border-radius: 20px;
  animation: fadeIn 0.3s ease;
}

.bottom-sheet {
  width: 100%;
  background: white;
  border-radius: 20px 20px 0 0;
  padding: 0 20px 0;
  transform: translateY(0);
  animation: slideUp 0.3s ease;
}

.sheet-header {
  display: flex;
  justify-content: center;
  padding: 12px 0;
}

.sheet-handle {
  width: 40px;
  height: 4px;
  background: #e0e0e0;
  border-radius: 2px;
}

.sheet-content {
  padding: 10px 0;
}

.payment-options {
  margin-bottom: 12px;
}

.payment-option {
  display: flex;
  align-items: center;
  padding: 16px;
  cursor: pointer;
  transition: all 0.3s ease;
  border-radius: 12px;
  margin-bottom: 8px;
}

.payment-option:hover {
  background: #f8f9fa;
}

.payment-icon {
  width: 40px;
  height: 40px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 12px;
  font-size: 20px;
  color: white;
}

.payment-icon.wechat {
  background: #07C160;
}

.payment-icon.alipay {
  background: #1677FF;
}

.payment-icon.bank {
  background: #722ED1;
}

.payment-text {
  font-size: 16px;
  color: #333;
  font-weight: 500;
}

.cancel-button {
  width: 100%;
  padding: 16px;
  background: #f8f9fa;
  color: #333;
  text-align: center;
  border-radius: 12px;
  font-size: 16px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.3s ease;
}

.cancel-button:hover {
  background: #e9ecef;
}

/* 表单弹窗样式 */
.custom-dialog-mask {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  border-radius: 20px;
  animation: fadeIn 0.3s ease;
}

.payment-form-dialog {
  width: 320px;
  max-height: 80vh;
  overflow-y: auto;
  background: white;
  border-radius: 12px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
}

.dialog-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 20px;
  border-bottom: 1px solid #f0f0f0;
  background: #fafafa;
}

.dialog-header h3 {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
  color: #333;
}

.close-btn {
  font-size: 20px;
  color: #999;
  cursor: pointer;
  padding: 4px;
  line-height: 1;
  transition: all 0.3s ease;
}

.close-btn:hover {
  color: #666;
  background: #f5f5f5;
  border-radius: 50%;
}

.dialog-body {
  padding: 20px;
}

.payment-form {
  width: 100%;
}

.form-group {
  margin-bottom: 20px;
}

.form-label {
  display: block;
  margin-bottom: 8px;
  font-size: 14px;
  font-weight: 500;
  color: #333;
}

.form-input {
  width: 100%;
  height: 44px;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  padding: 0 12px;
  font-size: 14px;
  outline: none;
  transition: all 0.3s ease;
  background: white;
}

.form-input:focus {
  border-color: #667eea;
  box-shadow: 0 0 0 2px rgba(102, 126, 234, 0.1);
}

.form-input::placeholder {
  color: #999;
}

/* 二维码上传 */
.qrcode-upload {
  border: 2px dashed #e0e0e0;
  border-radius: 8px;
  padding: 20px;
  text-align: center;
  cursor: pointer;
  transition: all 0.3s ease;
}

.qrcode-upload:hover {
  border-color: #667eea;
  background: #f8f9ff;
}

.qrcode-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.qrcode-upload-icon {
  font-size: 32px;
  color: #999;
}

.qrcode-upload-text {
  font-size: 14px;
  color: #666;
}

/* 复选框样式 */
.checkbox-group {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.checkbox-label {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  font-size: 14px;
  color: #333;
}

.checkbox-input {
  display: none;
}

.checkbox-custom {
  width: 16px;
  height: 16px;
  border: 2px solid #e0e0e0;
  border-radius: 4px;
  position: relative;
  transition: all 0.3s ease;
  background: white;
}

.checkbox-input:checked + .checkbox-custom {
  background: #667eea;
  border-color: #667eea;
}

.checkbox-input:checked + .checkbox-custom::after {
  content: '✓';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: white;
  font-size: 12px;
  font-weight: bold;
}

.checkbox-tip {
  font-size: 12px;
  color: #999;
  margin-left: 24px;
}

/* 验证码输入组 */
.verification-code-group {
  display: flex;
  gap: 12px;
}

.code-input {
  flex: 1;
}

.code-btn {
  min-width: 100px;
  height: 44px;
  background: #667eea;
  color: white;
  border: none;
  border-radius: 8px;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.code-btn:hover:not(.disabled) {
  background: #5a6fd8;
}

.code-btn.disabled {
  background: #ccc;
  cursor: not-allowed;
}

/* 提交按钮 */
.submit-btn {
  width: 100%;
  height: 44px;
  background: #667eea;
  color: white;
  border: none;
  border-radius: 8px;
  font-size: 16px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.3s ease;
  margin-top: 8px;
}

.submit-btn:hover:not(.disabled) {
  background: #5a6fd8;
}

.submit-btn.disabled {
  background: #ccc;
  cursor: not-allowed;
}

/* 二维码详情弹窗样式 */
.qrcode-detail-dialog {
  width: 340px;
  background: white;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2);
}

.qrcode-display-section {
  text-align: center;
  padding: 20px;
  background: linear-gradient(135deg, #f8f9ff 0%, #f0f2ff 100%);
  margin: -20px -20px 20px -20px;
}

.qrcode-container {
  background: white;
  border-radius: 16px;
  padding: 24px;
  margin: 0 auto 16px;
  display: inline-block;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
  border: 1px solid #e8ecff;
}

.qrcode-image {
  width: 200px;
  height: 200px;
  object-fit: cover;
  border-radius: 8px;
}

.qrcode-tips {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 16px;
  background: rgba(255, 255, 255, 0.9);
  border-radius: 8px;
  border: 1px solid #e8ecff;
  backdrop-filter: blur(10px);
}

.tip-icon {
  color: #667eea;
  font-size: 16px;
}

.qrcode-tips span {
  font-size: 14px;
  color: #666;
  font-weight: 500;
}

.card-info-section {
  padding: 0 20px;
}

.info-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 0;
  border-bottom: 1px solid #f0f0f0;
}

.info-item:last-child {
  border-bottom: none;
}

.info-label {
  font-size: 14px;
  color: #666;
  font-weight: 500;
}

.info-value {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  color: #333;
  font-weight: 500;
}

.info-icon {
  font-size: 16px;
  color: #667eea;
}

.default-badge {
  background: #667eea;
  color: white;
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 500;
}

.action-buttons {
  display: flex;
  gap: 12px;
  padding: 20px;
  margin: 20px -20px -20px -20px;
  background: #fafafa;
  border-top: 1px solid #f0f0f0;
}

.action-buttons .action-btn {
  flex: 1;
  height: 44px;
  border: none;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.3s ease;
}

.action-buttons .action-btn.secondary {
  background: #f5f5f5;
  color: #666;
}

.action-buttons .action-btn.secondary:hover {
  background: #e5e5e5;
}

.action-buttons .action-btn.primary {
  background: #667eea;
  color: white;
}

.action-buttons .action-btn.primary:hover {
  background: #5a6fd8;
}

/* 动画 */
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes slideUp {
  from {
    transform: translateY(100%);
  }
  to {
    transform: translateY(0);
  }
}

/* 响应式设计 */
@media (max-width: 375px) {
  .mobile-container {
    padding: 0;
  }

  .app-content {
    width: 100%;
    min-height: 100vh;
    border-radius: 0;
  }

  .payment-form-dialog {
    width: 280px;
  }

  .qrcode-detail-dialog {
    width: 300px;
  }

  .qrcode-image {
    width: 180px;
    height: 180px;
  }
}
</style>
